<template>
	<div class="wrap-citys">
		<div class="citys-box">
			<!-- <div class="search-pin">
				<span>全国热门城市:</span>
			</div> -->
			<ul class="pin-city">
				<span>热门城市:</span>
				<li @click="selectHot(item)" v-for="(item, index) in hotcity" :key="index">{{item.city}}</li>
			</ul>
			<div class="citys-title">
				<span>选择城市：</span>
				<el-cascader
          size="large"
          style="width:240px"
          :options="form.areaData"
          v-model="form.address"
          @change="handleChange">
        </el-cascader>
				<button class="city-sure-btn" @click="sureCity">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
import { provinceAndCityData, CodeToText, regionDataPlus, TextToCode } from 'element-china-area-data'
export default {
  data () {
    return {
    	form: {
    		areaData: provinceAndCityData,
    		address: [],
    		Province: '',
    		City: '',
    		Area: '',
    	},
      hotcity: [
        {provi: '湖南省', city: '长沙市'},
        {provi: '广东省', city: '广州市'},
        {provi: '山东省', city: '济南市'},
        {provi: '湖北省', city: '武汉市'},
        {provi: '福建省', city: '厦门市'},
        {provi: '贵州省', city: '贵阳市'},
        {provi: '浙江省', city: '杭州市'},
        {provi: '江苏省', city: '南京市'}
      ]

    }
  },
  methods: {
    goIndex () {
      this.$router.push({
        name: 'index'
      })
    },
    selectHot (item) {
      this.$store.commit('changeCity', item.city)
      this.$store.commit('changeProvi', item.provi)
      this.$router.push({
        name: 'index'
      })
    },
    sureCity () {
      this.$store.commit('changeProvi', this.form.Province)
      this.$store.commit('changeCity', this.form.City)
      if (this.form.City === '市辖区') {
        this.$store.commit('changeCity', this.form.Province)
      }
      if (this.form.Province === '台湾省') {
        this.$store.commit('changeCity', this.form.Province)
      }
      this.$router.push({
        name: 'index'
      })
    },
    handleChange (value) {
      this.form.Province = CodeToText[value[0]]
      this.form.City = CodeToText[value[1]]
      this.form.Area = CodeToText[value[2]]
    }
  },
  mounted () {
    // this.getColumn()
    // this.getAd()
  }
}
</script>
